<ng-container *ngIf="!showRules">
    <div class="text-center board-player" [ngStyle]="{color: battleService.currentPlayer.color}"
         *ngIf="battleService.isRunning()" [innerText]="getStateText()">
    </div>
    <div [ngStyle]="paddingStyle" class="board" *ngIf="battleService.state!=='NotStarted'">
        <div [ngStyle]="{padding: basicWidth + 'px', width: basicWidth*4 + 'px'}" class="square">
            <div class="rotated square"
                 [ngStyle]="{width: rotatedLength + 'px', height: rotatedLength + 'px', left: -rotatedOffset + 'px'}"></div>
            <div class="rotated square"
                 [ngStyle]="{width: rotatedLength + 'px', height: rotatedLength + 'px', left: rotatedOffset + 'px'}"></div>
            <div [ngStyle]="{width: (basicWidth*6) + 'px'}" class="horizon"></div>
            <div [ngStyle]="{height: (basicWidth*6) + 'px'}" class="vertical"></div>
            <div [ngStyle]="{padding: basicWidth + 'px', width: basicWidth*2 + 'px'}" class="square">
                <div [ngStyle]="paddingStyle" class="square"></div>
                <div [ngStyle]="paddingStyle" class="center-mask square"
                     [ngStyle]="{top: basicWidth + 'px', width: basicWidth*2 + 'px', height: basicWidth*2 + 'px'}"></div>
            </div>
        </div>
        <ng-container *ngFor="let row of battleService.pieces; let i1=index;">
            <ng-container *ngFor="let piece of row; let i2=index;">
                <app-piece [piece]="piece" [basicWidth]="basicWidth"></app-piece>
            </ng-container>
        </ng-container>
    </div>
    <div [ngStyle]="paddingStyle" class="board text-center" *ngIf="battleService.state !=='Finished'">
        <p *ngIf="battleService.state === 'NotStarted'">点击下方按钮开始游戏</p>
    </div>
    <div class="text-center" *ngIf="['Preparing', 'Started'].includes(battleService.state)">
        <button type="button" (click)="battleService.reset()">重置棋局</button>
    </div>
    <div class="text-center" *ngIf="'NotStarted'===battleService.state">
        <button type="button" (click)="battleService.prepare()">开始</button>
    </div>
    <div *ngIf="battleService.state === 'Finished'" class="mask">
        <div>
            <p>祝贺 <span [ngStyle]="{color: battleService.currentPlayer.color}">{{battleService.currentPlayer.name}}</span>
                赢了</p>
            <p>点击下方开始按钮重新开始游戏</p>
            <div class="text-center">
                <button type="button" (click)="battleService.prepare()">重新开始</button>
            </div>
        </div>
    </div>
    <div class="settings">
        <div>
            您是
            <select name="player" [(ngModel)]="firstPlayer" (ngModelChange)="playerChange($event)" [disabled]="battleService.state !== 'NotStarted'">
                <option *ngFor="let player of players" [value]="player.color">{{player.label}}</option>
            </select>
        </div>
        <a href="#" (click)="showRules=true">阅读规则</a>
        <label><input type="checkbox" [checked]="battleService.ai.enabled" (click)="enableAi($event)" [disabled]="battleService.state !== 'NotStarted'"/> 人机对战</label>

    </div>
    <div class="mask" *ngIf="battleService.ai.moving">
        <div>
            请勿打断
            <br>
            机器人思考中
        </div>
    </div>

</ng-container>
<div *ngIf="showRules">
    <div style="padding: 1rem;">
        <h4>三三棋</h4>
        <p>三三棋也称侗棋、打三棋、棋三。是自古以来就流传于中国少数民族民间尤其是侗族、壮族人民的一种双人对弈的版图休闲娱乐棋类游戏，现已流传到我国其它地区，深受人们的喜爱。(摘自百度百科)</p>
        <p>棋局分两个阶段</p>
        <p>1、落子阶段，双方分别落子（红色先手），每逢三，即纵、横、斜满三子，可选择对方一枚棋子标识为死子</p>
        <p>2、走子阶段，落子阶段的死子全部从棋盘移除，双方分别移动己方棋子（落子阶段后手转为先手），每逢三可直接移除对方其中一枚棋子。当某方棋子少于2枚，或者无棋子可移动，此方输棋，对方赢棋。</p>
        <div class="text-center">
            <button type="button" (click)="showRules=false">返回棋局</button>
        </div>
    </div>
</div>
